<template>
  <div class="Start">
    <div class="s-content" >
      <div class="c-img" v-for="item in items">
        <img v-bind:src="item.url" alt="">
        <p class="c-p">
          <span><router-link to="/">{{item.text1}}</router-link></span><span>{{item.text2}}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Start",
      data() {
        return{
          // title:"这是我的第一个vue脚手架项目"
          items:[
            {
              url:"../../static/img/ant.jpg",
              text1:"蚂蚁金服",
              text2:"ANT FINANCIAL"
            },{
              url:"../../static/img/pay.jpg",
              text1:"支付宝",
              text2:"A L I P A Y"
            }
          ]
        }
      }
    }
</script>

<style scoped>
  .Start{
    width: 100%;
    background: white;
  }
  .s-content{
    display: flex;
    padding-top: 30rem;
    padding-bottom: 3rem;
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
  .c-img{
    display: flex;
    align-items: center;
    width: 50%;
  }
  .c-img:first-child{
    border-right: 2px solid #ccc;
  }
  div.c-img:nth-child(1) img{
    width: 2.5rem;
    height: 3rem;
  }
  div.c-img:nth-child(2) img{
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 1rem;
  }
.c-p span{
  display: block;
  font-size: 1rem;
  line-height: 1.2rem;
  font-weight: bolder;
}
  .c-p span:last-child{
    font-size: 0.4rem;
  }
</style>
